<template>
    <div class="recent_view">
        <div class="top">
            最近
        </div>
        <div class="item" v-for="item in 5" :key="item">
            <div class="top">
                2020/9/0{{item}}
            </div>
            <div class="container">
                <el-table
                    :data="data_list"
                    border
                    style="width:100%"
                    :show-header="false"
                    @row-contextmenu="on_row_contextmenu">
                    <el-table-column
                        prop="name"
                        label="文件名">
                        <template slot-scope="scope">
                            <List_item_cp
                                :data_obj="scope.row">
                            </List_item_cp>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="操作说明">
                        <template slot-scope="scope">
                            {{scope.row.date + '  '}}
                            <el-tag type="info" size="medium">
                                查看
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="size"
                        label="文件大小">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <Contextmenu_one_cp
            v-model="contextmenu_one_show"
            :offset_x="right_event.clientX || 0"
            :offset_y="right_event.clientY || 0">
        </Contextmenu_one_cp>
    </div>
</template>

<script>
import Contextmenu_one_cp from '@/components/public_cp/contextmenu_one'
import List_item_cp from '@/components/public_cp/list_item'
export default {  //最近文件视图
    name: 'Recent_view',
    components:{Contextmenu_one_cp,List_item_cp},
    data(){
        return{
            data_list: [
                {
                    id:1, //唯一标识
                    name: '密态搜索技术研究报告',  //文件名
                    date: '2020-05-02', //时间
                    size: '13KB', //文件大小
                    type:'docx', //文件类型
                    grade:1, //安全等级
                },
            ],
            selection_item:{},//单选
            right_event:{},
            contextmenu_one_show:false, //控制右击目录的显示
        };
    },
    methods:{
        on_row_contextmenu(row,column,event){  //莫一行右击点击事件
            this.selection_item = row || {};
            this.contextmenu_one_show = true;
            this.right_event = event;
        },
    },
}
</script>

<style scoped lang='scss'>
.recent_view{
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    position: relative;
    >.top{
        height: 40px;
        font-size: 15px;
        font-weight: bold;
        padding: 20px 50px 0 50px;
        line-height: 100%;
        position:sticky;
        top: 0px;
        z-index: 10;
        background-color: white;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        box-shadow: 0px 10px 10px 0px #ffffff;
    }
    >.item{
        >.top{
            font-size: 20px;
            font-weight: bold;
            padding: 20px 50px;
            position:sticky;
            top: 40px;
            z-index: 9;
            line-height: 100%;
            background-color: white;
            border-bottom: 1px solid #f4f4f4;
        }
        >.container{
            margin-top: 20px;
            padding: 0 50px;
            margin-bottom: 20px;
            i{
                width: 40px;
                height: 40px;
                margin-right: 10px;
            }
            .el-tag{
                margin-left: 10px;
            }
        }
    }
}
</style>
